<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文字转语音</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
      crossorigin="anonymous"
    />
    <style type="text/css">
      .loop {
        cursor: pointer;
      }
      .voicePackage {
        margin-left: 5px;
      }
      .txtContent {
        width: 100%;
      }
    </style>
    <script src="./static/baidu_tts_core.js"></script>
    <script src="./static/index.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <a href="#" class="navbar-brand">文字转语音</a>
      </div>
    </nav>
    <div class="jumbotron">
      <div class="container">
        <h1>Hello 您好！</h1>
        <p>
          这个是使用百度语音合成接口实现的一个小功能，根据输入的文字，转换成语音并朗读，纯属娱乐！喜欢的朋友可以用来玩玩，认证30天过期一次。该功能不做任何保障，因为全部依赖他人服务器和接口，所以有问题也别留言！
        </p>
      </div>
    </div>
    <div class="container">
      <textarea
        id="txtContent"
        rows="10"
        class="txtContent"
        placeholder="请输入要转换的内容"
      ></textarea>
    </div>
    <div class="container">
      <div class="well">
        <div class="row">
          <div class="col-md-4">
            <button type="button" id="btnStart" class="btn btn-default">开始朗读</button>
          </div>
          <div class="col-md-4">
            <input type="checkbox" id="chkLoop" class="loop" /><label class="loop" for="chkLoop">
              循环播放
            </label>
          </div>
          <div class="col-md-4">
            <span class="voicePackage">请选择语音包:</span>
            <select id="slctVoicePackage">
              <option value="1">度小宇</option>
              <option value="2">度小美</option>
              <option value="3">度逍遥</option>
              <option value="4" selected>度丫丫</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="container" id="playerContainer"></div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </body>
</html>
